import React from "react"
import CloseIcon from "../icons/close"
import "./Dialog.scss"

interface DialogProps {
  title: string,
  show: boolean,
  className?: string,
  onClose?: () => void,
}

const Dialog: React.FC<DialogProps> = (props) => {
  return (
    <div className={`dialog-wrapper${props.show ? ' is-show' : ''}`}>
      <div className='dialog-scroll-area'>
        {props.show &&
          <div className={`dialog${props.className ? ` ${props.className}` : ''}`}>
            <div className='dialog-header'>
              <div className='dialog-header-title'>{props.title}</div>
              {props.onClose &&
                <div onClick={props.onClose} className='dialog-close-button'>
                  <CloseIcon color='#fff' height={24} width={24} />
                </div>
              }
            </div>
            <div className='dialog-content'>{props.children}</div>
          </div>
        }
      </div>
    </div>)
}

export default Dialog
